<template>
	<div>
		<div class="app-container">
			<TopInfo />
			<Search :lookup="data.lookup" @investigate="inves" />
			<el-button type="primary" size="small">
				<template #default>
					<span class="text-sm" @click="add">{{ $t('account.role.add') }}</span>
				</template>
			</el-button>
		</div>
		<div class="app-container" v-loading="data.mtloading">
			<el-table :data="data.list" :header-cell-style="{ 'text-align': 'center' }"
				:cell-style="{ 'text-align': 'center' }" class="w-full">
				<el-table-column prop="role_id" label="ID" />
				<el-table-column prop="name" :label="$t('account.role.name')">
					<template #default="scope">
						{{ scope.row.name || '--' }}
					</template>
				</el-table-column>
				<el-table-column prop="sort" :label="$t('account.role.roleSort')">
					<template #default="scope">
						{{ scope.row.sort || '0' }}
					</template>
				</el-table-column>
				<el-table-column prop="status" :label="$t('account.role.roleStatus')">
					<template #default="scope">
						<el-tag v-if="scope.row.status == 1" type="success">{{ $t('public.enable') }}</el-tag>
						<el-tag v-if="scope.row.status == 2" type="danger">{{ $t('public.disable') }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="desc" :label="$t('account.role.roleDesc')">
					<template #default="scope">
						{{ scope.row.desc || '--' }}
					</template>
				</el-table-column>
				<el-table-column prop="creator_nickname" :label="$t('source.creater')">
					<template #default="scope">
						{{ scope.row.creator_nickname || '--' }}
					</template>
				</el-table-column>
				<el-table-column :label="$t('public.operate')">
					<template #default="scope">
						<el-button size="small"  v-prmis="'auth_role_copy'" type="warning" @click="onCopy(scope.row.role_id)">{{ $t('account.role.copy') }}</el-button>
						<el-button size="small" type="success" @click="rule(scope.row.role_id)">{{ $t('account.role.node') }}</el-button>
						<el-button size="small" type="primary" @click="modify(scope.row)">{{ $t('public.modify')
							}}</el-button>
						<el-button v-prmis="'auth_role_del'" size="small" type="danger" v-if="scope.row.role_id != 1"
							@click="del(scope.row.role_id)">{{ $t('public.del') }}</el-button>
					</template>
				</el-table-column>
			</el-table>
			<PageNum :total="data.total" :page="data.roles" @exposeData="current" @fraction="fraction" />
		</div>
		<el-dialog v-model="dialogVisible" :title="$t('account.role.copyRole')" center width="30%">
			<el-form v-if="dialogVisible" :model="data.adateg" :rules="data.rules" label-width="100px">
				<el-form-item :label="$t('account.role.name')+':'" prop="name" class="w-5/6">
					<el-input v-model="data.info.name" :placeholder="$t('message.pleaseEnter')" />
				</el-form-item>
				<el-form-item :label="$t('account.role.roleDesc')+':'" prop="desc" class="w-5/6">
					<el-input v-model="data.info.desc" :placeholder="$t('message.pleaseEnter')" />
				</el-form-item>

				<div class="w-full text-center">
					<div class="inline-block">
						<el-button type="primary" @click="save">{{ $t('public.save') }}</el-button>
						<el-button @click="dialogVisible = false">{{ $t('public.cancel') }}</el-button>
					</div>
				</div>

			</el-form>
		</el-dialog>
	</div>

</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n' 
const { t: $t } = useI18n()
import TopInfo from '@/components/TopInfo/index.vue';
import Search from '@/components/Search/index.vue';
import PageNum from '@/components/PageNum/index.vue';
import { getauthroleList, delauthrole, copyAuthrolenode } from '@/api/account';
import { useRouter } from "vue-router";
const router = useRouter()
let dialogVisible = ref(false)
let data = reactive({
	roleId:0,
	info: {
		name: '',
		desc: ''
	},
	mtloading: false, // 加载
	lookup: [ // 筛选栏
		{ title: $t('account.role.name'), type: 'input', value: '', key: 'name' },
		{ title: $t('account.role.roleStatus'), type: 'define', select: [{ label: $t('public.enable'), value: 1 }, { label: $t('public.disable'), value: 2 }], value: '', key: 'status' },
	],
	list: [], // 列表信息
	roles: { // 筛选数据
		name: '',
		sort: '',
		status: '',
		page: 1,
		pageNum: 15,
	},
	total: 0, // 总条数
})

// 获取列表信息
let getlist = () => {
	data.mtloading = true
	getauthroleList(data.roles).then(res => {
		data.mtloading = false
		if (res.state == 200) {
			data.list = res.data.data
			data.total = res.data.total
		}
	})
}
let save = () => {
	if (!data.info.name) {
		return ElMessage({
			message: $t('message.roleEmpty'),
			type: 'error'
		})
	}
	let parm = {
		role_id: data.roleId,
		name: data.info.name,
		desc: data.info.desc
	}
	copyAuthrolenode(parm).then(res => {
		if (res.state == 200) {
			dialogVisible.value = false
			ElMessage({
				message: $t('message.copySuccess'),
				type: 'success'
			})
			getlist()
			return
		}
		ElMessage({
			message: $t('message.networkFailed'),
			type: 'error'
		})
	})
}
//  复制
let onCopy = (id: number) => {
	dialogVisible.value = true
	data.roleId = id
}
// 添加角色
let add = () => {
	router.push({ path: '/account/role/add_info' })
}

// 查看归属角色
let rule = (e) => {
	let query = {
		l: encodeURI(JSON.stringify({
			info: e
		}))
	}
	router.push({ path: '/account/role/bind_role', query: query })
}

// 编辑角色
let modify = (e) => {
	let query = {
		l: encodeURI(JSON.stringify({
			info: e
		}))
	}
	router.push({ path: '/account/role/details_info', query: query })
}

// 删除角色
let del = (e) => {
	ElMessageBox.confirm($t('message.isTip'))
		.then(res => {
			delauthrole({ 'role_id': e }).then(res => {
				if (res.state == 200) {
					ElMessage({
						message: $t('message.delSuccess'),
						type: 'success'
					})
					getlist()
					return
				}
				ElMessage({
					message: $t('message.networkFailed'),
					type: 'error'
				})
			})
		}).catch(err => {
			console.log('取消')
		})
}

// 查询回调
let inves = (e) => {
	for (let key in e) {
		data.roles[key] = e[key]
	}
	data.roles.page = 1
	data.roles.pageNum = 15
	getlist()
}

// 页数回调
let current = (e) => {
	data.roles.page = e
	getlist()
}

// 条数回调
let fraction = (e) => {
	data.roles.pageNum = e
	getlist()
}

getlist()

</script>
